<template>
  <div class="hello">
    <h3>使用store/index.js中的modules的user模块中的state中的name</h3>
<!--    这里是$store.state.user.name 中的user是分离的子模块名称  store/index.js中的-->
<!--    modules中的user 而name是user方法中的state的值-->
    <h3>{{ $store.state.user.name }}</h3>
    <button @click="updateName">改name值</button>

    <h3>使用store/index.js中的modules的user模块中的getters的getFullName方法</h3>
    <h3 style="color: red;">{{ $store.getters.getFullName }}</h3>

    <h3>使用store/index.js中的modules的user模块中的getters的getFullName2方法</h3>
    <h3 style="color: blue;">{{ $store.getters.getFullName2 }}</h3>

    <h3>使用store/index.js中的modules的user模块中的getters的getFullName3方法</h3>
    <h3>该方法可以调用全局的num</h3>
    <h3 style="color: blue;">{{ $store.getters.getFullName3 }}</h3>


    <h3>使用store/index.js中的modules的user模块中的actions的test1方法</h3>
    <button @click="updateName2">异步改名</button>
    <h3>{{ $store.state.user.name }}</h3>

    <h3>使用store/index.js中的modules的user模块中的actions的test2方法</h3>
    <button @click="updateName3">异步改名2</button>
    <h3>{{ $store.state.user.name }}</h3>

    <h3>在HelloWorld中运用Vuex</h3>
    <button @click="$store.state.num--">-</button>
    <h2>{{$store.state.num}}</h2>
    <button @click="$store.state.num++">+</button>
    <h2>在HelloWorld组件中运用Mutations</h2>
    <button @click="sub1">-</button>
    {{$store.state.dnum}}
    <button @click="add1">+</button>
    <h2>在HelloWorld组件中运用Mutations传一个参数的时候</h2>
    <button @click="sub2">-</button>
    {{$store.state.dnum}}
    <button @click="add2">+</button>
    <h2>在HelloWorld组件中运用Mutations传多个参数的时候第一种方式</h2>
    <button @click="sub3">-</button>
    {{$store.state.dnum}}
    <button @click="add3">+</button>
    <h2>在HelloWorld组件中运用Mutations传多个参数的时候第二种方式</h2>
    <button @click="sub4">-</button>
    {{$store.state.dnum}}
    <button @click="add4">+</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods:{
    //其中this.$store.commit('sub'); this.$store.commit('add');
    //中的sub  add 是store/index.js中的 mutations中的两个方法的方法名
    sub1(){
      this.$store.commit('sub');
    },
    add1(){
      this.$store.commit('add');
    },
    //Mutations传一个参数的时候
    sub2(){
      let i = 2;
      this.$store.commit('sub2',i);
    },
    add2(){
      let i = 2;
      this.$store.commit('add2',2);
    },
    //Mutations传多个参数的时候 第一种方式
    sub3(){
      const payload = {i:2,n:3};
      this.$store.commit('sub3',payload);
    },
    add3(){
      const payload = {i:2,n:3};
      this.$store.commit('add3',payload);
    },
    //Mutations传多个参数的时候 第二种方式
    sub4(){
      const payload = {i:2,n:3};
      this.$store.commit({
        type:'sub4',
        payload
      });
    },
    add4(){
      const payload = {i:2,n:3};
      this.$store.commit({
        type:'add4',
        payload
      });
    },
    updateName(){
      //会优先搜索主模块里面mutations的setName方法（缺省方法里面的）如果没有就会搜索子模块的方法
      //因此，各个里面mutations方法不能重复
      this.$store.commit('setName','HelloWrod');
    },
    updateName2(){
      //异步改名  使用的是user中的actions中的test1方法
      this.$store.dispatch('test1','test1test1test1test1');
    },
    updateName3(){
      //异步改名  使用的是user中的actions中的test2方法
      this.$store.dispatch('test2','test222222222222');
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
